<template>
    <div>
        <el-row>
            <el-col :span="4">
                <div>
                    <el-menu>
                        <el-submenu index="1">
                            <template slot="title">
                                <span style="color: red;" @click="myMove">我的移动</span>
                            </template>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <span>充值话费</span>
                            </template>
                            <el-menu-item index="1-1" @click="Recharge">话费充值</el-menu-item>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <span>我的订单</span>
                            </template>
                            <el-menu-item index="1-1" @click="RechargeOrder">充值订单</el-menu-item>
                            <el-menu-item index="1-2" >商品订单</el-menu-item>
                        </el-submenu>
                        <el-submenu index="4">
                            <template slot="title">
                                <span>售后服务</span>
                            </template>
                            <el-menu-item index="1-1" @click="myInvoice">我的发票</el-menu-item>
                            <el-menu-item index="1-2">退货申请/查询</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </div>
            </el-col>
            <el-col :span="20">
                <!-- 将路由视图放在这里 -->
                <router-view></router-view>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    methods:{
        myMove(){
            this.$router.push({path:'/myMove'})
        },
        Recharge(){
            this.$router.push({path:'/recharge'})
        },
        myInvoice(){
            this.$router.push({path:'/myInvoice'}) 
        },
        RechargeOrder(){
            this.$router.push({path:'/rechargeOrder'}) 
        }
    },
    created(){

    }
}
</script>

<style>
.custom-submenu {
    margin-left: 30px;
}

.centered-text-button {
    text-align: center;
    /* 水平居中 */
    line-height: 10px;
    /* 垂直居中 */
}
</style>